<template>
  <div class="settings-container">
    <!-- 系统配置卡片 -->
    <a-card title="系统配置" class="settings-card">
      <a-form ref="systemFormRef" :model="systemSettings" :rules="systemRules" layout="vertical" @finish="handleSystemSubmit">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="系统名称" name="systemName">
              <a-input v-model:value="systemSettings.systemName" placeholder="请输入系统名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="系统版本" name="version">
              <a-input v-model:value="systemSettings.version" placeholder="请输入系统版本" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="会话超时时间" name="sessionTimeout">
              <a-input-number v-model:value="systemSettings.sessionTimeout" :min="5" :max="480" placeholder="分钟" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码最小长度" name="passwordMinLength">
              <a-input-number v-model:value="systemSettings.passwordMinLength" :min="6" :max="20" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="数据备份频率" name="backupFrequency">
              <a-select v-model:value="systemSettings.backupFrequency" placeholder="请选择备份频率">
                <a-select-option value="daily">每日</a-select-option>
                <a-select-option value="weekly">每周</a-select-option>
                <a-select-option value="monthly">每月</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="日志保留天数" name="logRetentionDays">
              <a-input-number v-model:value="systemSettings.logRetentionDays" :min="7" :max="365" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" :loading="systemLoading"> 保存系统配置 </a-button>
            <a-button @click="handleSystemReset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 安全设置卡片 -->
    <a-card title="安全设置" class="settings-card">
      <a-form ref="securityFormRef" :model="securitySettings" layout="vertical" @finish="handleSecuritySubmit">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="启用双重验证">
              <a-switch v-model:checked="securitySettings.twoFactorAuth" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">启用后登录需要验证密码和验证码</div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="自动锁屏">
              <a-switch v-model:checked="securitySettings.autoLock" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">无操作时自动锁定屏幕</div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="密码强度检查">
              <a-switch v-model:checked="securitySettings.passwordStrengthCheck" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">要求密码包含大小写字母、数字和特殊字符</div>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="登录失败限制">
              <a-input-number v-model:value="securitySettings.maxLoginAttempts" :min="3" :max="10" style="width: 100%" />
              <div class="setting-description">超过次数后锁定账户</div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item>
          <a-button type="primary" html-type="submit" :loading="securityLoading"> 保存安全设置 </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 通知设置卡片 -->
    <a-card title="通知设置" class="settings-card">
      <a-form ref="notificationFormRef" :model="notificationSettings" layout="vertical" @finish="handleNotificationSubmit">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="系统通知">
              <a-switch v-model:checked="notificationSettings.systemNotification" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">系统维护、更新等通知</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="审判提醒">
              <a-switch v-model:checked="notificationSettings.judgmentReminder" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">待处理案件提醒</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="生死簿更新">
              <a-switch v-model:checked="notificationSettings.lifebookUpdate" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">生死记录变更通知</div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="轮回通知">
              <a-switch v-model:checked="notificationSettings.reincarnationNotice" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">转世安排完成通知</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="邮件通知">
              <a-switch v-model:checked="notificationSettings.emailNotification" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">重要事件邮件提醒</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="声音提示">
              <a-switch v-model:checked="notificationSettings.soundAlert" checked-children="开启" un-checked-children="关闭" />
              <div class="setting-description">操作成功/失败声音反馈</div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item>
          <a-button type="primary" html-type="submit" :loading="notificationLoading"> 保存通知设置 </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 系统信息卡片 -->
    <a-card title="系统信息" class="settings-card">
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="系统版本">
          {{ systemInfo.version }}
        </a-descriptions-item>
        <a-descriptions-item label="数据库版本">
          {{ systemInfo.databaseVersion }}
        </a-descriptions-item>
        <a-descriptions-item label="服务器时间">
          {{ systemInfo.serverTime }}
        </a-descriptions-item>
        <a-descriptions-item label="运行时间">
          {{ systemInfo.uptime }}
        </a-descriptions-item>
        <a-descriptions-item label="内存使用">
          {{ systemInfo.memoryUsage }}
        </a-descriptions-item>
        <a-descriptions-item label="磁盘使用">
          {{ systemInfo.diskUsage }}
        </a-descriptions-item>
        <a-descriptions-item label="在线用户">
          {{ systemInfo.onlineUsers }}
        </a-descriptions-item>
        <a-descriptions-item label="今日审判">
          {{ systemInfo.todayJudgments }}
        </a-descriptions-item>
      </a-descriptions>
      <div class="system-actions">
        <a-space>
          <a-button type="primary" @click="handleSystemRestart"> 重启系统 </a-button>
          <a-button @click="handleDataBackup"> 立即备份 </a-button>
          <a-button @click="handleLogExport"> 导出日志 </a-button>
          <a-button danger @click="handleClearCache"> 清除缓存 </a-button>
        </a-space>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useAppStore } from '@/stores'
import { h } from 'vue'

// 状态管理
const appStore = useAppStore()

// 响应式数据
const systemLoading = ref(false)
const securityLoading = ref(false)
const notificationLoading = ref(false)
const systemFormRef = ref()
const securityFormRef = ref()
const notificationFormRef = ref()

// 系统设置数据
const systemSettings = reactive({
  systemName: '生死簿管理系统',
  version: '1.0.0',
  sessionTimeout: 120,
  passwordMinLength: 8,
  backupFrequency: 'daily',
  logRetentionDays: 90
})

// 安全设置数据
const securitySettings = reactive({
  twoFactorAuth: false,
  autoLock: true,
  passwordStrengthCheck: true,
  maxLoginAttempts: 5
})

// 通知设置数据
const notificationSettings = reactive({
  systemNotification: true,
  judgmentReminder: true,
  lifebookUpdate: true,
  reincarnationNotice: true,
  emailNotification: false,
  soundAlert: true
})

// 系统信息
const systemInfo = computed(() => appStore.systemInfo)

// 验证规则
const systemRules = {
  systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
  version: [{ required: true, message: '请输入系统版本', trigger: 'blur' }]
}

// 方法
const handleSystemSubmit = async (values) => {
  systemLoading.value = true
  try {
    // 模拟保存系统配置
    await new Promise((resolve) => setTimeout(resolve, 1000))

    message.success('系统配置保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    systemLoading.value = false
  }
}

const handleSystemReset = () => {
  systemFormRef.value.resetFields()
}

const handleSecuritySubmit = async (values) => {
  securityLoading.value = true
  try {
    // 模拟保存安全设置
    await new Promise((resolve) => setTimeout(resolve, 1000))

    message.success('安全设置保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    securityLoading.value = false
  }
}

const handleNotificationSubmit = async (values) => {
  notificationLoading.value = true
  try {
    // 模拟保存通知设置
    await new Promise((resolve) => setTimeout(resolve, 1000))

    message.success('通知设置保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    notificationLoading.value = false
  }
}

const handleSystemRestart = () => {
  Modal.confirm({
    title: '确认重启系统',
    icon: h(ExclamationCircleOutlined),
    content: '重启系统将中断所有用户的操作，确定要继续吗？',
    okText: '确认重启',
    okType: 'danger',
    cancelText: '取消',
    centered: true,
    onOk() {
      message.loading('系统正在重启...', 0)
      // 模拟重启过程
      setTimeout(() => {
        message.destroy()
        message.success('系统重启完成')
      }, 3000)
    }
  })
}

const handleDataBackup = () => {
  message.loading('正在备份数据...', 0)
  // 模拟备份过程
  setTimeout(() => {
    message.destroy()
    message.success('数据备份完成')
  }, 2000)
}

const handleLogExport = () => {
  message.loading('正在导出日志...', 0)
  // 模拟导出过程
  setTimeout(() => {
    message.destroy()
    message.success('日志导出完成')
  }, 1500)
}

const handleClearCache = () => {
  Modal.confirm({
    title: '确认清除缓存',
    icon: h(ExclamationCircleOutlined),
    content: '清除缓存可能会影响系统性能，确定要继续吗？',
    okText: '确认清除',
    okType: 'danger',
    cancelText: '取消',
    centered: true,
    onOk() {
      message.loading('正在清除缓存...', 0)
      // 模拟清除过程
      setTimeout(() => {
        message.destroy()
        message.success('缓存清除完成')
      }, 1000)
    }
  })
}

// 生命周期
onMounted(() => {
  // 初始化设置数据
})
</script>

<style lang="scss" scoped>
.settings-container {
  .settings-card {
    margin-bottom: $spacing-lg;
  }

  .setting-description {
    color: $text-secondary;
    font-size: $font-size-sm;
    margin-top: $spacing-xs;
    line-height: 1.4;
  }

  .system-actions {
    margin-top: $spacing-lg;
    padding-top: $spacing-lg;
    border-top: 1px solid $border-color;
  }

  :deep(.ant-card-head-title) {
    font-size: $font-size-lg;
    font-weight: bold;
  }

  :deep(.ant-form-item-label > label) {
    font-weight: 500;
  }

  :deep(.ant-descriptions-item-label) {
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.02);
  }
}
</style>
